<md-card
    ui-card-size="{{ me.item.width }}x{{ me.item.height }}"
    layout="row"
    layout-align="space-between center"
    class="nr-dashboard-dropdown"
    ng-class="[{'nr-dashboard-disabled':me.item.disabled}, me.item.className]"
    node-id="{{me.item.id}}">
	<md-input-container flex layout="row">
        <p  ng-if="me.item.width>1 && me.item.getLabel().length>0"
            class="label"
            ng-if="me.item.label"
            ng-bind-html="me.item.getLabel()">
        </p>
        <md-tooltip
            ng-if="me.item.getTooltip().length"
            md-delay="700"
            md-direction="bottom"
            ng-bind-html="me.item.getTooltip()">
        </md-tooltip>
        <md-select
            ng-if="!me.item.multiple"
            ng-change="me.itemChanged()"
            ng-disabled="me.item.disabled"
            ng-model="me.item.value"
            placeholder="{{ me.item.place }}"
            flex="100">
            <md-select-header
                ng-if="me.item.options.length > 7"
                class="nr-dashboard-dropdown-header">
                <md-input-container
                    class="md-block"
                    style="height:32px;"
                    flex>
                    <input
                        ng-model="me.searchTerm"
                        ng-keydown="$event.stopPropagation();"
                        ng-click="$event.stopPropagation();"
                        type="search"
                        aria-label="Filter"/>
                    <ng-md-icon icon="search"></ng-md-icon>
                </md-input-container>
            </md-select-header>
            <md-option
                ng-value="opt.value"
                ng-repeat="opt in me.item.options | filter: { label: me.searchTerm }">{{ opt.label }}
            </md-option>
		</md-select>
        <md-select
            ng-if="me.item.multiple"
            ng-change="me.itemChanged()"
            ng-disabled="me.item.disabled"
            md-on-close="me.closed()"
            multiple
            ng-model="me.item.value"
            placeholder="{{ me.item.place }}"
            flex="100">
            <md-select-header
                ng-if="me.item.options.length > 7"
                class="nr-dashboard-dropdown-header">
                <md-checkbox md-no-ink aria-label="Select all" ng-model="me.selectAll" ng-change="me.checkAll()" style="width:unset;"></md-checkbox>
                <md-input-container
                    class="md-block"
                    style="height:32px;"
                    flex>
                    <input
                        ng-model="me.searchTerm"
                        ng-keydown="$event.stopPropagation()"
                        type="search"
                        aria-label="Filter"/>
                    <ng-md-icon icon="search"></ng-md-icon>
                </md-input-container>
            </md-select-header>
            <md-option
                ng-value="opt.value"
                ng-repeat="opt in me.item.options | filter: { label: me.searchTerm }">{{ opt.label }}
            </md-option>
		</md-select>
	</md-input-container>
</md-card>
